<template>
  <div>
    <el-upload
      :class="{disabled:uploadDisabled}"
      :action="actionUrl"
      :data="this.formData.uploadData"
      v-model="form.imageCertId"
      :name="formData.fileName"
      :headers="header"
      :on-preview="showImage"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :file-list="imageUrlData"
      list-type="text"
      :limit="1"
      :before-upload="beforeAvatarUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-dialog title="查看图片" :visible.sync="nationalDialogVisible" width="20%" append-to-body>
      <img width="100%" :src="form.imageCertId" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '../../utils/auth'
  import { delDocumentfile, getListBybuinessid, getDocument, showImage } from '../../api/document'
  import data from '../../utils/data'

  export default {
    name: 'documentlist',
    data() {
      return {
        form: {
          imageCertId: ''
        },
        header: {
          'Authorization': `Bearer ${getToken()}`
        },
        imageUrlData:[],
        imageUrls:[],
        newImageUrls:[],
        fileList:[],
        isAddBuiness:'',
        businessid:'',
        nationalDialogVisible:false,
        actionUrl:process.env.VUE_APP_BASE_API+'/system/upload',
        formData: {
          fileName: 'file',
          uploadData: {
            name: this.name,
            remark: this.filetype //用于表示当前操作是图集还是文件上传  file  image
          }
        }
      }
    },
    props: {
      name: {
        type: String
      },
      filetype: {
        type: String
      },
      businessids: {
        type: []
      },
      eqsn: {
        type: String
      },
      id: {
        type: String
      }
    },
    created() {
      getListBybuinessid({ filetype: 'image', businessid: this.eqsn }).then(response => {
        this.showFile(response.data, this.eqsn)
      })
    },
    methods: {
      uploadDisabled: function() {
        return this.imageUrlData.length > 0
      },

      getImageList() {
        return this.newImageUrls
      },
      showImage(file) {     //照片查看事件
        alert(file)
        let id = file.id
        getDocument(id).then(res => {
          if (res.data.filetype === 'jpg' || res.data.filetype === 'png') {
            showImage(id).then(response => {
              this.form.imageCertId = window.URL.createObjectURL(response)
              this.nationalDialogVisible = true
            })
          }
        })
      },
      showFile(imageData, eqsn) {
        this.businessid = eqsn === undefined ? '' : eqsn
        this.imageUrlData = []
        if (imageData != null && imageData != undefined) {
          for (let i = 0; i < imageData.length; i++) {
            let image = imageData[i]
            let obj = {}
            obj.url = process.env.VUE_APP_BASE_API + image.fileurl
            obj.id = image.id
            obj.name = image.name
            this.imageUrlData.push(obj)
          }
        }
      },
      //上传文件
      handleAvatarSuccess(res, file) {       //照片成功事件
        this.imageCertId = URL.createObjectURL(file.raw)
        let code = res.code
        let message = res.msg
        if (code === 200) {
          let imageCerts = res.data
          this.form.imageCertId = imageCerts.imgUrl
          this.$message.success(message)
          console.log('上传成功后的URL', this.form.imageCertId)
          this.imageUrls.push(imageCerts.id)
          console.log('上传成功后的数据', JSON.stringify(this.imageUrls))
          data.manage.imageUrl = this.imageUrls
          this.$emit('setBuinessid', false)
        } else {
          this.$message.error(message)
        }
      },
      beforeAvatarUpload(file) {             //照片成功之前的事件
        this.formData.uploadData.businessid = this.businessid
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isGIF = file.type === 'image/gif'
        if (!isJPG && !isPNG && !isGIF) {
          this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
        }
        return isJPG
      },
      handleRemove(file, fileList) {     //照片删除事件
        let id = file.id
        delDocumentfile(id).then(response => {
          if (response.code === 200) {
            this.form.imageCertId = ''
            this.$message.success('删除成功')
          }
        })
      },
      handlePictureCardPreview(file) {     //照片中点击文件列表中已上传的文件时的钩子
        this.form.imageCertId = file.url
        this.nationalDialogVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
